<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="main-box w100 flex-row-center" style="display: flex;height: 100vh;">
		<view class="head-box" :style="{paddingTop: +statusBarHeight+'px'}">
			<view class="head-title flex-row-center">
				<text class="title">{{assistantTitle}}</text>
				<view class="address-box flex-row-center" @click="chooseLocationTap">
					<up-icon name="map" color="rgba(255,255,255,0.87)" size="20"></up-icon>
					<template>
						<text class="address"
							v-if="addressInfo&&addressInfo.districtInfo">{{addressInfo.districtInfo}}</text>
						<text class="address" v-else>定位失败</text>
					</template>
					<up-icon name="arrow-right" color="rgba(255,255,255,0.87)" size="12"></up-icon>
				</view>
			</view>
			<!-- tab -->
			<view class="tab-box">
				<up-tabs @change="changeTab" :activeStyle="{
						'fontWeight': 'bold',
						'fontSize': '30rpx',
						'color': 'rgba(255,255,255,0.87)'
					}" lineColor="linear-gradient( 270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%)" :inactiveStyle="{
					 	'fontWeight': 500,
					 	'fontSize': '30rpx',
					 	'color': 'rgba(255,255,255,0.6)'
					 }" :list="tabList"></up-tabs>
			</view>
		</view>
		<!-- 内容 style="margin-top: 426rpx;" -->
		<view class="main-content w100" >
			<scroll-view :scroll-top="scrollTop" @refresherrefresh="onRefresh" refresher-default-style="white"
				@scrolltolower="scrolltolower" :refresher-enabled="true" @refresherpulling="onPpulling" scroll-y="true"
				@refresherrestore="onRestore" :refresher-triggered="assistantInfo.triggered"
				style="width: 100%;height: 100%;" class="scroll-Y">
				<!-- tab -->
				<view class="subsection-box flex-row-center w100">
					<view @click="changeSubsection(item,index)"
						:class="[item.label==subsectionIndex.recommend?'active-item':'subsection-item' , 'flex-center mar-l']"
						v-for="(item,index) in subsectionList" :key="index">
						<text class="text">{{item.name}}</text>
					</view>
				</view>
				<!-- list -->
				<view class="team-list">
					<template v-if="itemLoading">
						<view class="team-list-item" v-for="num in 3" :key="num">
							<uv-skeletons loading :skeleton="skeleton"></uv-skeletons>
						</view>
					</template>
					<template>
						<template v-if="assistantInfo.list.length>0">
							<view class="assistant-content">
								<mainAssistantItemVue v-for="(item,index) in assistantInfo.list" :key="index"
									:assistantInfo="item">
								</mainAssistantItemVue>
							</view>
							<view class="view-more">
								<up-loadmore :status="assistantInfo.status" />
							</view>
						</template>
						<view class="not-list-view" v-else>
							<text class="text">暂无相关类型数据~</text>
						</view>
					</template>

				</view>
			</scroll-view>
		</view>
		<!-- 未登录导航入口 -->
		<noLoginNavVue></noLoginNavVue>
		<tabbarContentVue :current="2"></tabbarContentVue>
	</view>
</template>

<script setup>
	import {
		getLocationInf
	} from '@/utils/getLocation.js';
	import {
		themeStore
	} from '@/stores/theme.js';
	import {
		chooseLocation
	} from '@/utils/chooseLocation';
	import {
		userInfoStore
	} from '@/stores/user';
	import tabbarContentVue from '@/components/tabbarContent/tabbarContent.vue';
	import mainAssistantItemVue from '@/components/assistant/mainAssistantItem.vue';
	import noLoginNavVue from '@/components/noLoginNav/noLoginNav.vue';
	import {
		handleDistance,
		countDown,
		isMillisecondTimestamp,
		parseURLParams3
	} from '@/utils/utools.js';
	import {
		configInfoStore
	} from '@/stores/config.js';
	import {
		inviteInfoStore
	} from '@/stores/inviteInfo';
	const inviteStore = inviteInfoStore();
	const {configInfo} = configInfoStore();
	const assistantTitle=ref(computed(()=>configInfo.assistant_title.value))
	const tagStyles = {
		p: "color:#dedede;font-size:24rpx;line-height:42rpx;",
		span: "color:#dedede;font-size:24rpx;line-height:42rpx;",
		div: "color:#dedede;font-size:24rpx;line-height:42rpx;",
		img: "max-width:480rpx;",
		image: "max-width:480rpx;",
	};
	const skeleton = [{
			type: 'flex',
			num: 1,
			style: 'alignItems: center',
			children: [{
				type: 'custom',
				num: 1,
				style: 'width:68rpx;height:68rpx;marginRight: 16rpx;borderRadius:50%;'
			}, {
				type: 'line',
				num: 1,
				style: 'width:100%;',
			}]
		},
		{
			type: 'flex',
			num: 1,
			style: 'marginTop:24rpx;marginBottom:24rpx;display:flex;',
			children: [{
					type: 'custom',
					num: 1,
					style: 'width:226rpx;height:226rpx;borderRadius:16rpx;marginRight: 34rpx;'
				},
				{
					type: 'line',
					num: 3,
					gap: '20rpx'
				},

			]
		}, {
			type: 'line',
			num: 1,
			gap: '20rpx'
		}
	]
	const userStore = userInfoStore();
	const theme = themeStore();
	const inputStyle = {
		color: '#C0CCCF'
	};
	const status = ref('loading');
	const itemLoading = ref(false);
	const addressInfo = computed(() => userStore.addressInfo);
	const subsectionIndex = reactive({
		label: null,
		recommend: null
	});
	let tabList = [{
		name: '全部',
		label: null
	}, {
		name: '忙碌中',
		label: 1
	}, {
		name: '空闲中',
		label: 2
	}, ]
	const subsectionList = [{
			name: '全部',
			label: null
		},
		{
			name: '推荐',
			label: 1
		},
	];
	const assistantInfo = reactive({
		list: [],
		page: 1,
		status: 'loadmore',
		triggered: false,
	})

	const statusBarHeight = ref(0);
	const scrollTop = ref(0.01);
	onLoad(async (option) => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
		getAssistantlist();
		if (addressInfo.value) {

		}
	})
	onShow(() => {
		// addressInfo.value = userStore.addressInfo;
	})
	const onRefresh = () => { //下拉刷新
		if (assistantInfo.triggered) return;
		assistantInfo.triggered = true;
		restList();
	}
	const scrolltolower = () => { //触底了
		getMoreList();
	}
	const getMoreList = () => {
		if (assistantInfo.status === 'nomore' || assistantInfo.status === 'loading') return;
		assistantInfo.status = 'loading';
		setTimeout(() => {
			getAssistantlist();
		}, 300)
	}
	const getAssistantlist = async (lat, lng) => { //获取组队列表
		const res = await $Api.assistant.getUseAssistant({
			page: assistantInfo.page,
			lat: addressInfo.value?.latitude,
			lng: addressInfo.value?.longitude,
			status: subsectionIndex.label,
			recommend: subsectionIndex.recommend,
			radius: 100
		})
		setTimeout(() => { //重置下拉刷新
			itemLoading.value = false;
			assistantInfo.triggered = false;
		}, 800)
		if (res.code === 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = [];
				arr = res.data.list.map(val => {
					let imageList = [];
					let fristName = '北';
					let countDownInfo = {
						status: -1,
						timeInfo: {}
					}
					if (val.juli) {
						val.juli = handleDistance(val.juli);
					}
					if (val.image) {
						if (typeof val.image === 'string') {
							imageList = val.image.split(',');
						} else if (Array.isArray(val.image)) {
							val.image.forEach(item => {
								imageList.push(item.url);
							})
						}
					};
					return {
						...val,
						imageList: imageList,
						fristName,
					}
				})
				assistantInfo.list = [...assistantInfo.list, ...arr];
			}
			if (res.data.totalPage > assistantInfo.page) {
				assistantInfo.status = 'loadmore';
				assistantInfo.page++;
			} else {
				assistantInfo.status = 'nomore';
			}
			// console.log('assistantInfo.list', assistantInfo.list);
		} else {
			setTimeout(() => {
				assistantInfo.triggered = false;
			}, 800)
			uni.$u.toast(res.msg);
		}
	};
	const changeTab = (e) => {
		subsectionIndex.label = e.label;
		assistantInfo.triggered = false; //关闭下拉刷新
		restList();
	}
	const changeSubsection = (item, index) => { //切换Subsection
		if (subsectionIndex.recommend === item.label) return;
		subsectionIndex.recommend = item.label;
		assistantInfo.triggered = false; //关闭下拉刷新
		restList();
	}
	const computeDate = (startDate, endDate) => {
		if (!isMillisecondTimestamp(startDate)) { //判断毫秒级时间戳
			startDate = startDate * 1000
		}
		if (!isMillisecondTimestamp(endDate)) { //判断毫秒级时间戳
			endDate = endDate * 1000
		}
		let newDate = new Date().getTime();
		if (newDate > endDate) { //已经结束
			return {
				status: -1,
				timeInfo: {}
			}
		} else if (newDate > startDate && newDate <= endDate) { //进行中，距结束多少时间
			let obj = {}
			obj = countDown(endDate);
			return {
				status: 1,
				...obj
			}
		} else if (newDate <= startDate) { //未开始 距开始多少时间
			let obj = {}
			obj = countDown(startDate);
			return {
				status: 2,
				...obj
			}
		}
	}
	const restList = () => { //重置列表
		assistantInfo.list = [];
		assistantInfo.page = 1;
		assistantInfo.status = 'loadmore';
		itemLoading.value = true;
		if (scrollTop.value == 0.01) { //执行滚动
			scrollTop.value = 0.011
		} else {
			scrollTop.value = 0.01;
		}
		getAssistantlist();
	}
	const chooseLocationTap = async () => { //选择地理位置
		const res = await chooseLocation(userStore.addressInfo?.latitude, userStore.addressInfo?.longitude);
		if (res.districtInfo) {
			userStore.addressInfo = res;
			restList();
		}
	}
	watch(() => userStore.addressInfo, (newVal) => {})
</script>
<style lang="scss">
	.u-search__content__input {
		background-color: transparent !important;
	}
</style>
<style lang="scss" scoped>
	.head-title {
		height: 76rpx;
		box-sizing: border-box;
		padding: 0 40rpx;

		.title {
			font-weight: 800;
			font-size: 44rpx;
			color: #FFFFFF;
		}

		.address-box {
			margin-left: 30rpx;

			.address {
				max-width: 178rpx;
				height: 36rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.87);
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				margin: 0 6rpx;
			}
		}
	}

	.search-box {
		width: 100%;
		box-sizing: border-box;
		margin: 20rpx 0;
		padding: 0 14rpx;
	}

	.tab-box {
		padding: 0 20rpx;
	}

	.subsection-box {
		.mar-l {
			margin-left: 26rpx;
		}

		.subsection-item {
			width: 108rpx;
			height: 48rpx;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 24rpx;

			.text {
				font-weight: bold;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.5);
			}
		}

		.active-item {
			width: 108rpx;
			height: 48rpx;
			// background: linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
			background: $btn-bg-color;
			border-radius: 24rpx;

			.text {
				font-weight: bold;
				font-size: 28rpx;
				// color: #DEDEDE;
				color: $btn-text-color;
			}
		}
	}

	.team-list {
		box-sizing: border-box;
		width: 100%;
		padding: 0 32rpx;
		// margin-top: 24rpx;
		margin-top: 12rpx;
	}

	.main-box {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.main-content {
		// display: flex;
		// transform: translateY(-48rpx);
		// height: calc(100% + 48rpx);
		overflow: hidden;
		/* #ifdef MP-WEIXIN */
		flex: 1;
		/* #endif */
	}

	.head-box {
		width: 100%;
		padding-bottom: 18rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		z-index: 99;

		.head-bg {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
		}

	}

	.team-list-item {
		margin-bottom: 16rpx;
	}

	.assistant-content {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 32rpx;
		column-gap: 32rpx;
	}

	.notice-content {
		width: 480rpx;
		padding: 20rpx 18rpx;
		background-color: #222528;
		border-radius: 16rpx;
		flex-direction: column;
		justify-content: space-between;

		.name {
			color: $title-color;
			font-size: 32rpx;
			box-sizing: border-box;
			text-align: center;
		}

		.notice-box {
			margin-top: 24rpx;


			.scroll-Y {
				width: 100%;
				max-height: 40vh;
			}

			.title {
				color: $title-color;
				font-size: 26rpx;
			}
		}

		.content {
			color: $description-color !important;
			font-size: 24rpx !important;
			margin-top: 32rpx;
			line-height: 32rpx !important;
		}

		.time {
			align-self: flex-end;
			color: $description-color;
			font-size: 24rpx;
			margin-top: 32rpx;

		}

		.content-box {
			flex-direction: column;
		}

		.notice-btn {
			width: 180rpx;
			height: 54rpx;
			background: $btn-bg-color;
			border-radius: 27rpx;
			color: $btn-text-color;
			font-size: 24rpx;
			text-align: center;
			line-height: 54rpx;
			margin-top: 24rpx;
		}
	}
</style>

<style>
	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>